<template>
  <section id="myChart" ref="myChart"></section>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'PieChart',
  components: {},
  props: {
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {

    }
  },
  computed: {
    option () {
      const echartData = this.chartData
      const total = echartData.map(item => item.value).reduce((pre, cur) => Number(pre) + Number(cur), 0)
      const rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 30 * 1,
          padding: [5, 4],
          align: 'center'
        },
        total: {
          color: "#ffc72b",
          fontSize: 40 * 1,
          align: 'center'
        },
        white: {
          color: "#fff",
          align: 'center',
          fontSize: 14 * 1,
          padding: [21, 0]
        },
        blue: {
          color: '#49dff0',
          fontSize: 16 * 1,
          align: 'center'
        },
        hr: {
          borderColor: '#0b5263',
          width: '100%',
          borderWidth: 1,
          height: 0,
        }
      }
      return {
        backgroundColor: '#031f2d',
        title: {
          text: '',
          left: 'center',
          top: '53%',
          padding: [24, 0],
          textStyle: {
            color: '#fff',
            fontSize: 18,
            align: 'center'
          }
        },
        series: [{
          name: '公司',
          type: 'pie',
          radius: ['42%', '50%'],
          hoverAnimation: false,
          color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
          label: {
            formatter: function (params) {
              const percent = ((params.value / total) * 100).toFixed(1);
              return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
            },
            rich: rich
          },
          labelLine: {
            length: 55 * 1,
            length2: 0,
            lineStyle: {
              color: '#0b5263'
            }
          },
          data: echartData
        }]
      };

    }
  },
  watch: {
    chartData: {
      handler () {
        this.drawLine()
      },
      deep: true
    }
  },
  created () {

  },
  mounted () {
    this.drawLine()
  },
  methods: {
    async drawLine () {
      await this.$nextTick()
      let myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption(this.option);
    }
  }
}
</script>
<style scoped lang='scss'>
#myChart {
  width: 100%;
  height: 100%;
}
</style>